<template>
  <div>
    <RouterLink custom v-slot="{ navigate }" :to="{ name: 'banner-create' }">
      <el-button v-authority:remove.superadmin type="primary" @click="navigate" size="default">新增轮播图</el-button>
    </RouterLink>
    <el-tabs :modelValue="activeName" class="demo-tabs" @tab-click="handleChangeMode">
      <el-tab-pane label="轮播图模式" name="swiper"></el-tab-pane>
      <el-tab-pane label="列表模式" name="table"></el-tab-pane>
    </el-tabs>
    <RouterView :list="list" @refresh="getBannerListData" />
  </div>
</template>
<script>
import { getBannerListApi } from '@/api/banner'

export default {
  name: 'AppBannerList',
  data () {
    return {
      list: []
    }
  },
  computed: {
    activeName () {
      return this.$route.meta.type
    }
  },
  methods: {
    handleChangeMode (tab) {
      this.$router.push({ name: `banner-list-${tab.paneName}` })
    },
    async getBannerListData () {
      try {
        this.list = await getBannerListApi()
      } catch (error) {}
    },
  },
  mounted () {
    this.getBannerListData()
  }
}
</script>
